<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>
    <body>
        <div class="header">
            <div class="header-wapper">
             <a href="#" class="logo"><img src="https://www.bearead.com/public/images/logo-headerTop.svg" alt=""></a><!--alt 无法显示图像时的替代文本-->
             <ul class="leftmenu">
                 <li>
                     <a href="#" id="leftmenu-fx">发现</a>
                 </li>
                 <li>
                        <a href="#" class="font-blue">标签库</a>
                 </li>
                 <li>
                        <a href="#">来签约吧</a><i class="icon icon-tanhaoblack"></i>
                 </li>
             </ul>
             <ul class="rightmenu">
                <li>
                    <a href="#">注册</a>
                </li>
                <li>
                    <a href="#">登陆</a>
                </li>
                <li>
                    <a href="#" class="bth">
                        <i class="icon icon-pen"></i>
                        <span>写作中心</span>
                    </a>
                </li>
             </ul>
            </div>
        </div>
    </body>
</html>
<style>
    /*header整体布局*/
    .header{
        padding: 1px,0;
        font-size: 0;
    }/*先行设置会导致后面部分内容暂时性失效*/
    .header-wapper{
        margin: 12px,30px;
        height: 40px;
    }
    /*header整体布局完毕*/

    /*logo部分*/
    .header .logo{/*根据.header找到.logo*/
        display: inline-block;/*行内块元素*/
        height: 40px;
        position: relative;/*生成相对定位的元素，相对于其正常位置进行定位*/
        margin-right: 30px;
        vertical-align: middle;/*对齐,中部对齐*/
    }
    .header .logo::after{/*单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素;常用伪类after和before*/
        content: "";/*content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容*/
        position: absolute;/*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位*/
        display: block;/*此元素将显示为块级元素，此元素前后会带有换行符*/
        width: 1px;
        height: 14px;
        background-color: #EEF1F3;
        right: -31px;
        top: 50%;
        margin-top: -7px;
    }
    .header .logo img{
        display: block;
        height: 100%;
    }
    /*logo部分定义完毕*/

    /*左侧菜单*/
    .leftmenu{
        text-decoration: underline;/*定义文本下的一条线*/
    }
    #leftmenu-fx{
        color: blue;
    }
    .header .leftmenu{
        height: 100%;
        line-height: 40px;
        display: inline-block;
        vertical-align: middle;/*把此元素放置在父元素的中部*/
    }
    .header .leftmenu>li{
        font-size: 16px;
        margin-left: 30px;
        display: inline-block;
        position: relative;
        color: #3A3D40;
    }
    .header .leftmenu>li a{
        color: #3A3D40;
    }
    .header .leftmenu>li .icon-tanhaoblack{
        margin-left: 6px;
        vertical-align: middle;
    }
    .header .leftmenu>li.font-blue{
        color: #2e9fff;
    }
    .header .leftmenu>li.font-blue a{
        color: #2e9fff;
    }

    .header .leftmenu>li:hover{
        color: #2e9fff;
    }
    .header .leftmenu>li:hover a{
        color: #2e9fff;
    }
</style>